<template>
<div class="page-container-padding">
  <!-- 查询条件 -->
  <div style="margin-bottom:10px;">
    <span style="margin:0 6px;">人员</span>
    <el-select v-model="queryUser" size="mini" style="width:150px;">
      <el-option v-for="user in userList" :value="user.id" :label="user.admin_name" :key="user.id"></el-option>
    </el-select>
    <span style="margin:0 6px;">日期</span>
    <span>
      <el-date-picker
      style="width:220px;"
        v-model="dateRange"
        type="daterange"
        size="mini"
        :clearable="false"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="toQueryShortMessage">查询</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preMonthShortMessage">上一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextMonthShortMessage">下一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="yearShortMessage">全年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preYearShortMessage">上一年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextYearShortMessage">下一年</el-button></span>
  </div>
  <!-- 显示数据 -->
  <div>
    <div v-if="messageList.length>0">
      <div>
        <div class="msg-box" v-for="msgItem,index in messageList" :key="index">
          <div class="msg-title">{{ msgItem.create_date }}</div>
          <div class="msg-content">{{ msgItem.content }}</div>
          <div>
            <span>作者：<span class="msg-author">{{ msgItem.admin_name }}</span></span>
            <span v-if="msgItem.editor">
              标记：
              <el-select style="margin-left:6px;width:120px;" v-model="msgItem.audit_mind" size="mini">
                <el-option value="A00" label="正常"></el-option>
                <el-option value="A01" label="编写有误"></el-option>
                <el-option value="A02" label="敏感词汇"></el-option>
                <el-option value="A03" label="遭遇投诉"></el-option>
                <el-option value="A04" label="其他问题"></el-option>
              </el-select>
              <span style="margin-left:4px;"><el-button type="primary" size="mini" @click="toSaveAuditMind(msgItem)">保存</el-button></span>
              <span style="margin-left:4px;"><el-button type="infor" size="mini" @click="msgItem.editor=false">取消</el-button></span>
            </span>
            <span v-else>标记：<span class="msg-audit" @click="msgItem.editor=true">{{ msgItem.audit_mind_zh }}</span></span>
          </div>
        </div>
      </div>
      <el-pagination style="margin-top:5px;"
        background
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="currentPageChange">
      </el-pagination>
    </div>
    <div v-else>
      <el-empty description="查询条件无数据"></el-empty>
    </div>
  </div>
</div>
</template>

<script>
import { getAnalystList } from '@/api/user'
import { getMonthDatePoint,getYearDatePoint,datetimeToStr } from '@/utils/datetimeUtils'
import { getShortMessage, updateShortMessag } from '@/api/departmentWork/shortMessage'
export default {
  data(){
    return {
      dateRange: [],
      userList: [],
      queryUser: 0,
      page: 1,
      pageSize: 50,
      totalCount: 0,
      messageList: []
    }
  },
  mounted() {
    this.setCurrentDates()
    this.queryAnalysts()
    this.queryShortMessage()
  },
  methods:{
    setCurrentDates(){
      let flag = new Date().getDate() < 10?'previous':'current'
      this.dateRange = getMonthDatePoint(new Date(), flag)
    },

    queryAnalysts(){
      getAnalystList().then(res => {
        this.userList = res.data
        this.userList.splice(0, 0, {id: 0, admin_name: '全部'})
      })
    },

    queryShortMessage(){
      const params = {
        page: this.page,
        page_size: this.pageSize,
        user: this.queryUser,
        start: datetimeToStr(this.dateRange[0], true, ''),
        end: datetimeToStr(this.dateRange[1], true, '')
      }
      getShortMessage(params).then(res => {
        const data = res.data
        this.page = data.page
        this.totalCount = data.total_count
        this.messageList = data.data.map(item => {
          item.editor = false
          return item
        })
      })
    },

    // 页码改变
    currentPageChange(page){
      this.page = page
      this.queryShortMessage()
    },

    //点击查询
    toQueryShortMessage(){
      this.setCurrentDates()
      this.queryShortMessage()
    },
    // 点击上一个月
    preMonthShortMessage(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
      this.queryShortMessage()
    },

    // 点击下一个月
    nextMonthShortMessage(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
      this.queryShortMessage()
    },

    // 点击全年
    yearShortMessage(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'current')
      this.queryShortMessage()
    },

    // 点击上一年
    preYearShortMessage(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'previous')
      this.queryShortMessage()
    },

    // 点击下一年
    nextYearShortMessage(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'next')
      this.queryShortMessage()
    },

    // 保存标记
    toSaveAuditMind(msg){
     const updateData = {
       sid: msg.id,
       audit_mind: msg.audit_mind
     }
     updateShortMessag(updateData).then(res => {
       if (res.code === 200){
         msg.editor = false
         msg.audit_mind_zh = res.data.audit_mind_zh
       }
       this.$baseMessage(res.msg, res.code===200?'success':'error')
     })
    }
  }
}
</script>

<style scoped lang="scss">
.msg-box{
  margin-bottom: 15px;
  padding: 10px;
  border-radius:4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  &:hover{
    background-color:rgba(0,0,0,0.1);
  }
  .msg-title{
    color: #0073FC;
    font-weight: 700;
    font-size:16px;
  }
  .msg-content{
    line-height: 22px;
    margin-bottom:10px;
  }
  .msg-author{
    color:#fff;
    background-color:#b3cbf7;
    width:36px;
    display: inline-block;
    line-height:12px;
    padding:2px 4px;
    font-size:12px;
    border-radius:6px;
    margin-right:20px;
    text-align:center;
  }
  .msg-audit{
    cursor:pointer;
    border-radius:8px;
    padding:2px 4px;
    background-color:#44AAEE;
    color:#fff;
    font-size: 12px;
    &:hover{
      color:#0073FC;
    }
  }
}
</style>
